<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>选择元素</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box inner"></div>
    <div class="box">
        <div class="insert"></div>
    </div>

    <p id="title"></p>

    <a href="">write less do more</a>
    <a href="" title="">hello world</a>

    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3</li>
        <li>li_4</li>
        <li>li_5</li>
        <li>li_6</li>
    </ul>

    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        // CSS 选择器几乎都可以成为 $ 使用的选择器
        // 常见的： #id/.className/tagName   属性选择器，后代选择器  > ~ +
        // 通过 $/jQuery 选择到的元素是 jQuery 元素，本质是由选择到的 DOM 对象组成的数组
        var $box = $(".box");

        console.log("标签选择器", $("a"));
        console.log("id选择器", $("#title"));
        console.log("类名选择器", $box);
        console.log("交集选择器", $(".box.inner"));
        console.log("并集选择器", $(".box,a"));

        console.log("属性选择器", $("a[title]"));
        console.log("后代选择器", $(".box .insert"));

        // 筛选选择器  :eq(index)对应下标元素  :lt(index) 小于下标的元素 :gt(index) 大于下标的元素 :first/last  :even/odd
        console.log($("li:eq(2)"));
        console.log($("li:lt(2)"));
        console.log($("li:gt(2)"));

        // jQ对象变成 DOM 对象  $ele[index]  $ele.get(index)
        console.log("将jQ对象转成DOM",$box[0]);
        console.log("将jQ对象转成DOM",$box.get(0));

        // 把DOM对象转成jQ对象 $(DOM)   $(DOMele) => $ele
        var box = document.querySelector(".box");
        console.log("把DOM转成jQ", $(box));

        // DOM元素不能使用jQ对象的方法
    </script>
</body>
</html>